<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门经费管理</title>
</head>
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/jquery-ui-timepicker-addon.css"/>
<link rel="stylesheet" href="css/jquery-ui.css"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/city-picker.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/jquery-impromptu.min.css" type="text/css"/>
<link rel="stylesheet" href="css/combo.select.css" type="text/css"/>
<body>
    <div id="dataLoad" style="display:none; position: fixed; width: 100%; top: 20%; z-index: 1001;">
        <table width=100% height=100% border=0 align=center valign=middle>
            <tr height=50%><td align=center>&nbsp;</td></tr>
            <tr><td align=center><img src="images/loading.gif"/></td></tr>
            <tr><td align=center>处理中，请稍后......</td></tr>
            <tr height=50%><td align=center>&nbsp;</td></tr>
       </table>
  </div>
    <div id="search_bar" class="mt10">
        <div class="box">
            <div class="box_border">
                <div class="box_top"><b class="pl15">数据筛选</b></div>
                <div class="box_center pt10 pb10" style="padding-left: 35%;">
                    <table class="form_table" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="section_area">部门选择</td>
                            <td class="section_area">
                                <span class="fl">
                                    <div class="select_border">
                                        <div class="select_containers ">
                                            <select name="" class="select" id="section_depart">

                                            </select>
                                        </div>
                                    </div>
                                </span>
                            </td>
                            <td class="section_area">部门类型</td>
                            <td class="section_area">
                                <span class="fl">
                                    <div class="select_border">
                                        <div class="select_containers ">
                                            <select name="" class="select" id="section_type">
                                                <option value="0">全部</option>
                                                <option value="1">普通部门</option>
                                                <option value="2">大案要案</option>
                                            </select>
                                        </div>
                                    </div>
                                </span>
                            </td>
                            <td><input type="button" value="确定" id="confirm_query" class="ext_btn ext_btn_submit"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="mt10">
        <div class="box">
            <div class="box_border">
                <div class="box_top"><b class="pl15">部门经费信息</b></div>
                <div class="mt10">
                    <div id="table" class="mt10">
                        <div class="box span10 oh" style="margin-left: auto; margin-right: auto">
                            <table id="section_fee_info" width="100%" border="0" cellpadding="0" cellspacing="0" class="list_table" style="table-layout:fixed; font-size:1.5rem">
                                <tr>
                                    <th class="td_center" style="width:5%">编号</th>
                                    <th class="td_center" style="width:10%">部门名</th>
                                    <th class="td_center" style="width:10%">部门类型</th>
                                    <th class="td_center" style="width:10%">部门经费总额</th>
                                    <th class="td_center" style="width:10%">误餐费</th>
                                    <th class="td_center" style="width:10%">行政业务经费</th>
                                    <th class="td_center" style="width:10%">其它经费</th>
                                    <th class="td_center" style="width:15%">相关操作</th>
                                </tr>
                            </table>
                        </div>
                        <div class="page mt10">
                            <div class="pagination">
                                <ul>
                                    <li class="first-child" ><a href="#" id="firstPage">首页</a></li>
                                    <li class="" ><a href="#" id="prevPage">上一页</a></li>
                                    <li class="" ><a href="#" id="nextPage">下一页</a></li>
                                    <li class="last-child " ><a href="#" id="endPage">末页</a></li>
                                    <li class="disabled pagedata" id="page1"><a id="pageInfo">1/20</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="add_fee_dialog" class="mt10" style="display:none" title="经费追加">
        <div class="box">
            <div class="box_center">
                <table class="form_table pb15" width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="td_left">行政业务经费：</td>
                        <td class="">
                            <input type="number" value="0" class="input-text lh25 add_fee" size="20" >
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">加班误餐费：</td>
                        <td class="">
                            <input type="number" value="0" class="input-text lh25 add_fee" size="20" >
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">其它经费：</td>
                        <td class="">
                            <input type="number" value="0" class="input-text lh25 add_fee"  size="20">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">追加总经费：</td>
                        <td class="">
                            <input type="number" value="0" class="input-text lh25 add_total_fee" size="20" disabled>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/jquery-impromptu.min.js"></script>
<script src="js/jquery.combo.select.js" type="text/javascript"></script>
<script>
    var firstSet = true;
    var section_fee_info;
    //辅助函数，获取部门
    function getSection(){
        $('#section_depart').empty();
        $('#section_depart').append("<option value='0'>全部部门</option>");
        $.get(url + 'Common/GetSection.php', function(result){
            var t = JSON.parse(result);

            for(var i = 0; i < t.length; i++){
                var id = t[i]['section_id'];
                var name = t[i]['section_name'];
                $('#section_depart').append("<option value='"+id+"'>" + name + "</option>");
            }
            $('#section_depart').comboSelect();
        })
    }

    //辅助函数，初始化追加经费对话框
    function initAddFeeDialog(id){
        $('.add_fee').each(function(){
            $(this).val(0);
        });
        $('.add_total_fee').val(section_fee_info[id].total_fee);
    }

    //辅助函数，计算总经费
    function calcTotalFee(){
        var add_fees = $('.add_fee');
        var total_fee = 0;
        for(var i = 0; i < add_fees.length; i++){
            total_fee += parseFloat($(add_fees[i]).val());
        }
        $('.add_total_fee').val(total_fee.toFixed(2));

    }

    //辅助函数，处理经费输入
    function processAddFeeInput(){
        $('.add_fee').each(function(id, elem){
            $(this).bind('input propertychange',function(){
                calcTotalFee();
            })
        })
    }

    //辅助函数，上传追加经费
    function updateAddFee(fee_info){
        $('#dataLoad').show();
        $.post(url + 'FinanceFeeManage/AddSectionFinanceFee.php', {'fee_data': fee_info}, function(data){
            $('#dataLoad').hide();
            var t = JSON.parse(data);
            if(t.state == 1){
                $.prompt("<h3>部门经费添加成功</h3>", {
                    title: '操作提醒',
                    buttons: {'确定': true}
                });
                $('#add_fee_dialog').dialog('close');
                getSectionFeeData();
            }
            else{
                $.prompt("<h3>服务器忙或网络故障，请稍后再试</h3>", {
                    title: '操作提醒',
                    buttons: {'确定': true}
                });
            }
        })
    }

    //辅助函数，处理追加经费
    function processAddFee(id){
        $('#add_fee_dialog').dialog({
            resizable: false,
            height: "auto",
            width: "auto",
            modal: true,
            title: section_fee_info[id].section_name + "--部门经费追加",
            buttons: {
                '确定': function(){
                    var section_add_fee_info = {
                        'admin_fee':$('.add_fee').eq(0).val(),
                        'work_fee' : $('.add_fee').eq(1).val(),
                        'other_fee' : $('.add_fee').eq(2).val(),
                        'total_fee' : $('.add_total_fee').val(),
                        'section_id' : section_fee_info[id].section_id
                    };
                    updateAddFee(section_add_fee_info);

                },
                '取消': function(){
                    $(this).dialog('close');
                }
            }
        })
    }

    //辅助函数，处理追加按钮
    function processAddFeeButton(){
        $('.btn_add').each(function(){
            $(this).click(function(e){
                e.preventDefault();
                var id = parseInt($(this).parent().parent().find('td').eq(0).text());
                initAddFeeDialog(id-1);
                processAddFee(id-1);

            })
        })
    }

    //辅助函数，处理详情按钮
    function processDetailButton(){
        $('.btn_detail').each(function(){
            $(this).click(function(e){
                e.preventDefault();
                var id = parseInt($(this).parent().parent().find('td').eq(0).text());
                window.localStorage.setItem('curSection', section_fee_info[id-1].section_id);
                window.open('finance_section_fee_detail.html');
            })
        })
    }

    //辅助函数，显示列表数据
    function showSectionFeeTable(){
        $(".info_tr").empty();

        var start = (curPage-1) * rowPerPage;
        var end = curPage * rowPerPage > section_fee_info.length ? section_fee_info.length : curPage * rowPerPage;


        for (var i = start; i < end; i++) {
            $('#section_fee_info').append("" +
                "<tr class='tr info_tr'>" +
                "<td class='td_center'>" + (i + 1) + "</td>" +
                "<td class='td_center'>" + section_fee_info[i].section_name + "</td>" +
                "<td class='td_center'>" + getSectionTypeName(section_fee_info[i].section_type) + "</td>" +
                "<td class='td_center'>" + section_fee_info[i].total_fee + "</td>" +
                "<td class='td_center'>" + section_fee_info[i].work_fee + "</td>" +
                "<td class='td_center'>" + section_fee_info[i].admin_fee + "</td>" +
                "<td class='td_center'>" + section_fee_info[i].other_fee + "</td>" +
                "<td class='td_center'>" +
                    "<a class='ext_btn shengpi btn_detail'><span class='browse'></span>详情</a>" +
                    "<a class='ext_btn shengpi btn_add'><span class='add'></span>追加</a>" +
                "</td>" +
                "</tr>");
        }
        processAddFeeButton();
        processAddFeeInput();
        processDetailButton();
    }

    //辅助函数，获取部门经费数据
    function getSectionFeeData(){
        $('#dataLoad').show();
        var section_id = $('#section_depart').val();
        var section_type = $('#section_type').val();
        $.post(url + 'FinanceFeeManage/GetSectionFinanceFee.php',
            {'section_type': section_type, 'section_id':section_id}, function(data){
            $('#dataLoad').hide();
            var t = JSON.parse(data);
            if(t.state == 1){
                section_fee_info = t.data;
                if(firstSet){
                    createTablePage(t.total_count);
                    firstSet = false;
                }
                showSectionFeeTable();
            }
            else{
                $.prompt("<h3>服务器忙或网络故障，请稍后再试</h3>", {
                    title: '操作提醒',
                    buttons: {'确定': true}
                });
            }
        })
    }

    function confirmQuery(){
       // console.log(section_fee_info);
        $('#confirm_query').click(function(e){
            getSectionFeeData();
            e.preventDefault();
        })
    }


    $(function(){
        getSection();
        getSectionFeeData();
        clickFirstPage(showSectionFeeTable);
        clickEndPage(showSectionFeeTable);
        clickNextPage(showSectionFeeTable);
        clickPrevPage(showSectionFeeTable);
        confirmQuery();
    })
</script>
</html>